<template>
<van-loading v-if='loading'/>

<div v-else>
  <this-banners :all="goods.banners" />

  <section class="relative z-10 -mt-4 px-4 py-2 bg-goods_price">
      <div>
          <div>
              <span class="text-lg text-red-500">
        <i>￥</i>
        <strong class="text-2xl font-semibold">
          {{ $formatMoney(goods.price) }}
        </strong> </span
      ><span class="ml-2 text-sm text-gray-600 line-through">
        <i>￥</i>
        {{ $formatMoney(goods.origin_price) }}</span
      >
          </div>
          <count-down 
          v-if='goods.seckill'
          :time='goods.seckill.time'/>
      </div>
    </section>

<div class="bg-[#F7F7F7] ">
    <div class="px-[10px] pt-[10px]">
    <p class="bg-white space-x-2 px-4 py-2 relative overflow-hidden rounded-t">
      <van-tag
        color="#FF711D" text-color="#EE5A00"
        plain
        class="!rounded !px-2"
        size="medium"
        v-for="item in goods.cuts"
        :key="item.id"
        >{{ item.title }}</van-tag
      >

      <wx-launch class="absolute top-2 right-0 w-24 h-10" :path="miniPath">
        <span
          class="
            absolute
            top-1
            right-0
            w-16
            text-sm
            bg-gradient-to-r
            from-[#FFC107]
            to-[#FF9B00]
            text-white
            py-1
            pl-1
            text-center
            rounded-tl-full rounded-bl-full
          "
          :class="isWx ? 'pointer-events-none' : ''"
          @click="$openApp"
          >领券</span
        >
      </wx-launch>
    </p>

    <p class="px-4 pb-2 relative overflow-hidden rounded-b bg-white">
        <div class="flex items-center justify-between">
            <span class="text-lg font-semibold text-gray-800">{{ goods.name }}</span>
            <wx-launch
            class="relative w-16 h-10 flex-shrink-0"
            :path='miniPath'
            >
                    <button class="text-sm absolute top-2 -right-1 text-gray-400 w-full text-right" 
                        :class="isWx ? 'pointer-events-none' : ''"
                        @click="$openApp"
                    >
                        <van-icon name="like" />
                        <span class="ml-1 text-gray-500">收藏</span>
                    </button>
            </wx-launch>
        </div>

        <div class="text-gray-500 text-sm">
            已售{{goods.sold}}/{{goods.stock}}
        </div>
    </p>

    <p class="mt-[10px] rounded px-4 py-[5px] bg-white shadow flex items-center justify-between relative overflow-hidden">
        <div class="flex items-center">
        <img 
        class="w-6 h-6 rounded-full border"
        :src="goods.seller.logo" alt="">
      <span class="ml-2 text-lg text-gray-800 font-semibold">{{ goods.seller.name }}</span>
        </div>
         <wx-launch
            class="relative w-8 h-10 top-2"
            :path='miniPath'
            >
            <span class="absolute top-0 right-0">
            <van-icon name="arrow"
                class=""
                :class="isWx ? 'pointer-events-none' : ''"
                @click="$openApp"
            />
            </span>
      </wx-launch>
    </p>

    <div class="mt-[10px] rounded shadow bg-white">
        <this-comments :all="comments" :count="goods.evaluations_count" />
        <this-questions :all="questions" />
    </div>
</div>

    <this-label>图文详情</this-label>

    <div v-html="goods.details" class="bg-white">
    </div>
    <this-label>购买须知</this-label>
    <div v-html="goods.attention" class="bg-white p-4">
    </div>
    <this-label>其他推荐</this-label>
    <this-hots :all='hots' 
            :path='miniPath'
    ></this-hots>
</div>

<this-footer :goods='goods' :path="miniPath"/>
</div>

</template>

<script>
import thisBanners from './banners.vue'
import thisComments from './comments.vue'
import thisQuestions from './questions.vue'
import wxShare from '../../plugins/wxShare'
import wxLaunch from '../../components/wxLaunch.vue'
import CountDown from './countDown.vue'
import thisLabel from './label.vue'
import thisHots from './hots.vue'
import thisFooter from './footer.vue'
export default {
  components: {
    thisBanners,
    thisComments,
    thisQuestions,
    wxLaunch,
    CountDown,
    thisLabel,
    thisHots,
    thisFooter,
  },
  inject: ['isWx'],
  data() {
    return {
      loading: false,
      goods: {
        seller: {},
      },
      comments: [],
      questions: [],
      hots: [],
      goods_id: '',
      sharer_id: '',
      seckill: null,
    }
  },
  computed: {
    miniPath() {
      return `/page/goods_show/goods_show?id=${this.goods_id}&share_user_id=${this.sharer_id}`
    },
  },
  created() {
    const query = this.$route.query
    this.goods_id = query.goods_id
    this.sharer_id = query.sharer_id

    this.axios.get(`/page/goods/${query.goods_id}`).then((res) => {
      const { goods, evaluations, questions, seckill, recommended } =
        res.data.result
      this.goods = goods
      this.comments = evaluations
      this.questions = questions
      this.seckill = seckill
      this.hots = recommended

      wxShare({
        title: this.title,
        imgUrl: this.goods.cover,
        desc: this.goods.desc,
      })
    })
  },
  methods: {},
}
</script>

<style>
.bg-goods_price {
  background: url(../../assets/good_detail_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
